<template>
  <div class="excel-to-json app-container">
    <ContentLayout :title="'Excel转Json'">
      <div>
        <CustomUpload v-model:fileList="fileList" :limit="1"></CustomUpload>
        <el-button type="primary" @click="handleWordToHtml"
          >word to html</el-button
        >
      </div>
      <div v-html="convertedHtml"></div>
    </ContentLayout>
  </div>
</template>

<script setup lang="ts">
import Docxtemplater from "docxtemplater";
import JSZip from "jszip";
import type { UploadUserFile } from "element-plus";
import { ElMessageBox } from "element-plus";
import { ref } from "vue";
import PizZip from "pizzip"; // 替换 JSZip 为 PizZip
const fileList = ref<UploadUserFile[]>([]);
const convertedHtml = ref<string>("");
// const handleWordToHtml = () => {
//   ElMessageBox.confirm("是否将word转换为html?", "提示", {
//     confirmButtonText: "确定",
//     cancelButtonText: "取消",
//     type: "warning",
//   }).then(async () => {
//     // 使用 async 处理异步操作
//     // 获取文件
//     const file = fileList.value[0].raw;
//     if (file) {
//       const reader = new FileReader();
//       reader.onload = async (e) => {
//         // 使用 async 处理异步操作
//         const arrayBuffer = e.target.result;
//         try {
//           const zip = await JSZip.loadAsync(arrayBuffer); // 使用 await 获取 JSZip 实例
//           const doc = new Docxtemplater().loadZip(zip); // 将 JSZip 实例传递给 Docxtemplater
//           const text = doc.getFullText(); // 获取文档的纯文本内容
//           convertedHtml.value = `<pre>${text}</pre>`; // 将文本内容显示为HTML
//         } catch (err) {
//           console.error("Error processing file:", err);
//         }
//       };
//       reader.readAsArrayBuffer(file);
//     }
//   });
// };

const handleWordToHtml = () => {
  ElMessageBox.confirm("是否将word转换为html?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    // 获取文件
    const file = fileList.value[0].raw;
    if (file) {
      const reader = new FileReader();
      reader.onload = async (e) => {
        const arrayBuffer = e.target.result;
        try {
          const zip = new PizZip(arrayBuffer); // 使用 PizZip 替代 JSZip
          const doc = new Docxtemplater(zip, {
            paragraphLoop: true,
            linebreaks: true,
          });
          //}).loadZip(zip); // 将 PizZip 实例传递给 Docxtemplater
          const text = doc.getFullText(); // 获取文档的纯文本内容
          convertedHtml.value = `<pre>${text}</pre>`; // 将文本内容显示为HTML
        } catch (err) {
          console.error("Error processing file:", err);
        }
      };
      reader.readAsArrayBuffer(file);
    }
  });
};
</script>

<style lang="scss" scoped></style>
